<template>
	<!-- 用户-用户列表 -->
	<div>
	<!-- 	<input type="file" ref="fileInput" @change="handleFileChange" style="display: none;" />
		<vxe-button @click="triggerFileInput">选择文件导入</vxe-button> -->
		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="padding-add">
				<!-- 筛选条件 -->
				<Form ref="userFrom" :model="userFrom" :label-width="labelWidth" :label-position="labelPosition"
					@submit.native.prevent>
					<Row :gutter="24">
						<Col span="18">
						<Row>
							<Col span="24">
							<Row>
								<Col>
								<FormItem label="用户搜索：" label-for="nickname">
									<Input v-model="userFrom.nickname" placeholder="请输入" element-id="nickname" clearable
										class="input-add">
									<Select v-model="field_key" slot="prepend" style="width: 80px">
										<Option value="all">全部</Option>
										<Option value="uid">UID</Option>
										<Option value="phone">手机号</Option>
										<Option value="nickname">用户昵称</Option>
									</Select>
									</Input>
								</FormItem>
								</Col>
							</Row>
							</Col>
						</Row>
						</Col>
						<template v-if="collapse">
							<Col span="18">
							<Row>
								<Col>
								<FormItem label="用户分组：" label-for="group_id">
									<Select v-model="userFrom.group_id" placeholder="请选择" element-id="group_id"
										clearable class="input-add">
										<!--                        <Option value="">全部</Option>-->
										<Option :value="item.id" v-for="(item, index) in groupList" :key="index">
											{{ item.group_name }}
										</Option>
									</Select>
								</FormItem>
								</Col>
								<Col>
								<FormItem label="用户标签：" label-for="label_id">
									<div class="labelInput acea-row row-between-wrapper input-add"
										@click="openLabelList">
										<div>
											<div v-if="dataLabel.length">
												<Tag closable v-for="(item, index) in dataLabel" :key="index"
													@on-close="closeLabel(item)">{{ item.label_name }}</Tag>
											</div>
											<span class="span" v-else>请选择</span>
										</div>
										<div class="iconfont iconxiayi"></div>
									</div>
								</FormItem>
								</Col>
								<Col>
								<FormItem label="性别：" label-for="sex">
									<Select v-model="userFrom.sex" placeholder="请选择" clearable class="input-add">
										<!--                        <Option value="">全部</Option>-->
										<Option value="1">男</Option>
										<Option value="2">女</Option>
										<Option value="0">未知</Option>
									</Select>
								</FormItem>
								</Col>
							</Row>
							</Col>
							<Col span="18">
							<Row>
								<Col>
								<FormItem label="会员等级：" label-for="level">
									<Select v-model="userFrom.level" placeholder="请选择" element-id="level" clearable
										class="input-add">
										<!--                        <Option value="">全部</Option>-->
										<Option :value="item.id" v-for="(item, index) in levelList" :key="index">
											{{ item.name }}
										</Option>
									</Select>
								</FormItem>
								</Col>
								<Col>
								<FormItem label="付费会员：" label-for="isMember">
									<Select v-model="userFrom.isMember" placeholder="请选择" clearable class="input-add">
										<!--                        <Option value="">全部</Option>-->
										<Option value="1">是</Option>
										<Option value="0">否</Option>
									</Select>
								</FormItem>
								</Col>
								<Col>
								<FormItem label="身份：">
									<Select v-model="userFrom.is_promoter" placeholder="请选择" clearable
										class="input-add">
										<!--                        <Option value="">全部</Option>-->
										<Option value="1">推广员</Option>
										<Option value="0">普通用户</Option>
									</Select>
								</FormItem>
								</Col>
							</Row>
							</Col>

							<Col span="18">
							<Row>
								<Col class="dateMedia">
								<FormItem label="访问时间：" label-for="user_time">
									<DatePicker :editable="false" @on-change="onchangeTime" :value="timeVal"
										format="yyyy/MM/dd" type="daterange" placement="bottom-start"
										placeholder="自定义时间" :options="options" class="input-add"></DatePicker>
								</FormItem>
								</Col>
								<Col>
								<FormItem label="访问情况：" label-for="user_time_type">
									<Select v-model="userFrom.user_time_type" placeholder="请选择"
										element-id="user_time_type" clearable class="input-add">
										<!--                        <Option value="all">全部</Option>-->
										<Option value="visitno">时间段未访问</Option>
										<Option value="visit">时间段访问过</Option>
										<Option value="add_time">首次访问</Option>
									</Select>
								</FormItem>
								</Col>
								<Col>
								<FormItem label="下单次数：" label-for="pay_count">
									<Select v-model="userFrom.pay_count" placeholder="请选择" element-id="pay_count"
										clearable class="input-add">
										<!--                        <Option value="">全部</Option>-->
										<Option value="-1">0次</Option>
										<Option value="0">1次以上</Option>
										<Option value="1">2次以上</Option>
										<Option value="2">3次以上</Option>
										<Option value="3">4次以上</Option>
										<Option value="4">5次以上</Option>
									</Select>
								</FormItem>
								</Col>
							</Row>
							</Col>
							<Col span="18">
							<Row>
								<Col>
								<FormItem label="国家：" label-for="country">
									<Select v-model="userFrom.country" placeholder="请选择" element-id="country" clearable
										@on-change="changeCountry" class="input-add">
										<!--                        <Option value="">全部</Option>-->
										<Option value="domestic">中国</Option>
										<Option value="abroad">其他</Option>
									</Select>
								</FormItem>
								</Col>
								<Col v-if="userFrom.country === 'domestic'">
								<FormItem label="省份：">
									<Cascader :data="addresData" change-on-select :value="address" v-model="address"
										@on-change="handleChange" class="input-add"></Cascader>
								</FormItem>
								</Col>
							</Row>
							</Col>

						</template>
						<Col span="6" class="ivu-text-right userFrom">
						<FormItem>
							<Button type="primary" label="default" class="mr15" @click="userSearchs">搜索</Button>
							<Button class="ResetSearch" @click="reset('userFrom')">重置</Button>
							<a v-font="14" class="ivu-ml-8" @click="collapse = !collapse">
								<template v-if="!collapse">
									展开
									<Icon type="ios-arrow-down" />
								</template>
								<template v-else>
									收起
									<Icon type="ios-arrow-up" />
								</template>
							</a>
						</FormItem>
						</Col>
					</Row>
				</Form>
			</div>
		</Card>
		<Card :bordered="false" dis-hover class="ivu-mt listbox">
			<div class="new_tab">
				<!-- Tab栏切换 -->
				<Tabs v-model="headeType" @on-click="onClickTab">
					<TabPane :label="item.name" :name="item.type" v-for="(item, index) in headeNum" :key="index" />
				</Tabs>
			</div>
			<Row type="flex" justify="space-between">
				<!-- 相关操作 -->
				<Col span="24">
				<Button v-auth="['admin-user-save']" type="primary" class="mr20" @click="save">添加用户</Button>
				<Button type="primary" class="mr20" @click="exportUser">导出用户</Button>
				<Button type="primary" class="mr20" @click="exportUser2">导出全部代理</Button>
				<Tooltip content="本页至少选中一项" :disabled="!!checkUidList.length && isAll==0">
					<Button v-auth="['admin-user-coupon']" type="primary" class="mr20"
						:disabled="!checkUidList.length && isAll==0" @click="onSend">发送优惠券</Button>
				</Tooltip>
				<Tooltip content="本页至少选中一项" :disabled="!!checkUidList.length && isAll==0">
					<Button v-auth="['admin-wechat-news']" class="greens mr20" size="default"
						:disabled="!checkUidList.length && isAll==0" @click="onSendPic"
						v-if="userFrom.user_type === 'wechat'">
						<Icon type="md-list"></Icon>
						发送图文消息
					</Button>
				</Tooltip>
				<Tooltip content="本页至少选中一项" :disabled="!!checkUidList.length && isAll==0">
					<Button v-auth="['admin-user-set_label']" class="mr20" :disabled="!checkUidList.length && isAll==0"
						@click="setBatch">批量设置</Button>
				</Tooltip>
				</Col>
			</Row>
			<!-- 用户列表表格 -->
			<vxe-table ref="xTable" class="mt25" :loading="loading" row-id="uid" :expand-config="{accordion: true}"
				:checkbox-config="{reserve: true}" @checkbox-all="checkboxAll" @checkbox-change="checkboxItem"
				:data="userLists">
				<vxe-column type="" width="0"></vxe-column>
				<vxe-column type="expand" width="35">
					<template #content="{ row }">
						<div class="tdinfo">
							<Row class="expand-row">
								<Col span="6">
								<span class="expand-key">首次访问：</span>
								<span class="expand-value"> {{row.add_time | formatDate}}</span>
								</Col>
								<Col span="6">
								<span class="expand-key">近次访问：</span>
								<span class="expand-value">{{row.last_time | formatDate}}</span>
								</Col>
								<Col span="6">
								<span class="expand-key">身份证号：</span>
								<span class="expand-value">{{row.card_id}}</span>
								</Col>
								<Col span="6">
								<span class="expand-key">真实姓名：</span>
								<span class="expand-value">{{row.real_name}}</span>
								</Col>
								<!-- <Col span="6">
                    <span class="expand-key">手机号：</span>
                    <span class="expand-value">{{row.phone}}</span>
                </Col> -->
							</Row>
							<Row class="expand-row">
								<!-- <Col span="6">
                    <span class="expand-key">真实姓名：</span>
                    <span class="expand-value">{{row.real_name}}</span>
                </Col> -->
								<Col span="6">
								<span class="expand-key">标签：</span>
								<span class="expand-value">{{row.labels}}</span>
								</Col>
								<Col span="6">
								<span class="expand-key">生日：</span>
								<span class="expand-value">{{row.birthday}}</span>
								</Col>
								<Col span="6">
								<span class="expand-key">地址：</span>
								<span class="expand-value">{{row.addres}}</span>
								</Col>
							</Row>
							<Row class="expand-row">
								<Col span="6">
								<span class="expand-key">备注：</span>
								<span class="expand-value">{{row.mark}}</span>
								</Col>
							</Row>
						</div>
					</template>
				</vxe-column>
				<vxe-column type="checkbox" width="100">
					<template #header>
						<div>
							<Dropdown transfer @on-click="allPages">
								<a href="javascript:void(0)" class="acea-row row-middle">
									<span>全选({{isAll==1?(total-checkUidList.length):checkUidList.length}})</span>
									<Icon type="ios-arrow-down"></Icon>
								</a>
								<template #list>
									<DropdownMenu>
										<DropdownItem name="0">当前页</DropdownItem>
										<DropdownItem name="1">所有页</DropdownItem>
									</DropdownMenu>
								</template>
							</Dropdown>
						</div>
					</template>
				</vxe-column>
				<vxe-column field="uid" title="UID" width="60"></vxe-column>
				<vxe-column field="avatars" title="头像" width="50">
					<template v-slot="{ row }">
						<viewer>
							<div class="tabBox_img">
								<img v-lazy="row.avatar" />
							</div>
						</viewer>
					</template>
				</vxe-column>
				<vxe-column field="nickname" title="昵称" min-width="150">
					<template v-slot="{ row }">
						<div class="acea-row">
							<Icon type="md-male" v-show="row.sex === '男'" color="#2db7f5" size="15" class="mr5" />
							<Icon type="md-female" v-show="row.sex === '女'" color="#ed4014" size="15" class="mr5" />
							<div v-if="row.delete_time != null" style="color:#ed4014;">{{row.nickname}} (已注销)</div>
							<div v-else v-text="row.nickname"></div>
						</div>
					</template>
				</vxe-column>
				<vxe-column field="isMember" title="付费会员" min-width="90">
					<template v-slot="{ row }">
						<div>{{ row.isMember ? "是" : "否" }}</div>
					</template>
				</vxe-column>
				<vxe-column field="level" title="用户等级" min-width="90"></vxe-column>
				<vxe-column field="group_id" title="分组" min-width="100"></vxe-column>
				<vxe-column field="phone" title="手机号" min-width="110"></vxe-column>
				<vxe-column field="user_type" title="用户类型" min-width="100"></vxe-column>
				<vxe-column field="spread_uid_nickname" title="推荐人" min-width="100"></vxe-column>
				<vxe-column field="now_money" title="余额" min-width="100"></vxe-column>
				<vxe-column field="action" title="操作" align="center" width="180" fixed="right">
					<template v-slot="{ row }">
						<a @click="promoters(row, 'man')">推广团队</a>
						<Divider type="vertical" />
						<span v-if="row.delete_time != null" style="color: #c5c8ce;">编辑</span>
						<a v-else @click="edit(row)">编辑</a>
						<Divider type="vertical" v-if="row.is_extend_info" />
						<a @click="extendInfo(row)" v-if="row.is_extend_info">信息补充</a>
						<Divider type="vertical" />
						<a @click="changeMenu(row, '1')">详情</a>
					</template>
				</vxe-column>
			</vxe-table>
			<vxe-pager class="mt20" border size="medium" :page-size="userFrom.limit" :current-page="userFrom.page"
				:total="total" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']"
				@page-change="pageChange">
			</vxe-pager>
		</Card>
		<!-- 用户标签 -->
		<Modal v-model="labelListShow" scrollable title="选择用户标签" :closable="true" width="540" :footer-hide="true"
			:mask-closable="false">
			<labelList ref="labelList" @activeData="activeData" @close="labelListClose"></labelList>
		</Modal>
		<!-- 编辑表单 积分余额-->
		<edit-from ref="edits" :FromData="FromData" :userEdit="1" @submitFail="submitFail"></edit-from>
		<!-- 发送优惠券-->
		<send-from ref="sends" :is-all="isAll" :where="userFrom" :userIds="checkUidList.join(',')"></send-from>
		<!-- 会员详情-->
		<user-details ref="userDetails" :group-list="groupList"></user-details>
		<!--发送图文消息 -->
		<Modal v-model="modal13" scrollable title="发送消息" width="1200" height="800" footer-hide class="modelBox">
			<news-category v-if="modal13" :isShowSend="isShowSend" :is-all="isAll" :where="userFrom"
				:userIds="checkUidList.join(',')" :scrollerHeight="scrollerHeight" :contentTop="contentTop"
				:contentWidth="contentWidth" :maxCols="maxCols"></news-category>
		</Modal>
		<!--修改推广人-->
		<Modal v-model="promoterShow" scrollable title="修改推广人" class="order_box" :closable="false">
			<Form ref="formInline" :model="formInline" :label-width="100" @submit.native.prevent>
				<FormItem label="用户头像：" prop="image">
					<div class="picBox" @click="customer">
						<div class="pictrue" v-if="formInline.image">
							<img v-lazy="formInline.image" />
						</div>
						<div class="upLoad acea-row row-center-wrapper" v-else>
							<Icon type="ios-camera-outline" size="26" />
						</div>
					</div>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="primary" @click="putSend('formInline')">提交</Button>
				<Button @click="cancel('formInline')">取消</Button>
			</div>
		</Modal>
		<Modal v-model="customerShow" scrollable title="请选择商城用户" :closable="false" width="900">
			<customerInfo v-if="customerShow" @imageObject="imageObject"></customerInfo>
		</Modal>
		<Modal v-model="labelShow" scrollable title="选择用户标签" :closable="true" width="540" :footer-hide="true">
			<userLabel :uid="labelActive.uid" @close="labelClose"></userLabel>
		</Modal>
		<!-- 批量设置 -->
		<Modal v-model="batchModal" title="批量设置" width="750" class-name="batch-modal"
			@on-visible-change="batchVisibleChange">
			<Alert show-icon>每次只能修改一项，如需修改多项，请多次操作。</Alert>
			<Row type="flex" align="middle">
				<Col span="4">
				<Menu :active-name="menuActive" width="auto" @on-select="menuSelect">
					<MenuItem :name="1">用户分组</MenuItem>
					<MenuItem :name="2">用户标签</MenuItem>
					<MenuItem :name="3">用户等级</MenuItem>
					<MenuItem :name="4">积分余额</MenuItem>
					<MenuItem :name="5">赠送会员</MenuItem>
					<MenuItem :name="6">上级推广人</MenuItem>
				</Menu>
				</Col>
				<Col span="20">
				<Form :model="batchData" :label-width="122">
					<FormItem v-if="menuActive === 1" label="用户分组：">
						<Select v-model="batchData.group_id">
							<Option v-for="item in groupList" :key="item.id" :value="item.id">{{ item.group_name }}
							</Option>
						</Select>
					</FormItem>
					<FormItem v-if="menuActive === 2" label="用户标签：">
						<div class="select-tag" @click="openLabelList">
							<div v-if="batchLabel.length">
								<Tag v-for="item in batchLabel" :key="item.id" closable @on-close="tagClose(item.id)">
									{{ item.label_name }}
								</Tag>
							</div>
							<span v-else class="placeholder">请选择</span>
							<Icon type="ios-arrow-down" />
						</div>
					</FormItem>
					<FormItem v-if="menuActive === 3" label="用户等级：">
						<Select v-model="batchData.level_id">
							<Option v-for="item in levelList" :key="item.id" :value="item.id">{{ item.name }}</Option>
						</Select>
					</FormItem>
					<FormItem v-if="menuActive === 4" label="修改余额：">
						<RadioGroup v-model="batchData.money_status">
							<Radio :label="1">增加</Radio>
							<Radio :label="2">减少</Radio>
						</RadioGroup>
					</FormItem>
					<FormItem v-if="menuActive === 4" label="余额：">
						<InputNumber v-model="batchData.money" :min="0" :max="999999"></InputNumber>
					</FormItem>
					<FormItem v-if="menuActive === 4" label="修改积分：">
						<RadioGroup v-model="batchData.integration_status">
							<Radio :label="1">增加</Radio>
							<Radio :label="2">减少</Radio>
						</RadioGroup>
					</FormItem>
					<FormItem v-if="menuActive === 4" label="积分：">
						<InputNumber v-model="batchData.integration" :min="0" :max="999999"></InputNumber>
					</FormItem>
					<FormItem v-if="menuActive === 5" label="修改时长：">
						<RadioGroup v-model="batchData.days_status">
							<Radio :label="1">增加</Radio>
							<Radio :label="2">减少</Radio>
						</RadioGroup>
					</FormItem>
					<FormItem v-if="menuActive === 5" label="修改时长(天)：">
						<InputNumber v-model="batchData.day" :min="0" :max="999999"></InputNumber>
					</FormItem>
					<FormItem v-if="menuActive === 6" label="上级推广员：">
						<Input :value="spread_name" placeholder="请选择" icon="ios-arrow-down" @on-click="customer"
							@on-focus="customer"></Input>
					</FormItem>
				</Form>
				</Col>
			</Row>
			<div slot="footer">
				<Button @click="cancelBatch">取消</Button>
				<Button type="primary" @click="saveBatch">保存</Button>
			</div>
		</Modal>
		<!-- 推广人列表-->
		<promoters-list ref="promotersLists"></promoters-list>
	</div>
</template>

<script>
	import {
		formatDate
	} from '@/utils/validate';
	import userLabel from "../../../components/userLabel";
	import labelList from "@/components/labelList";
	import promotersList from "./handle/promotersList";
	import {
		mapState
	} from "vuex";
	import expandRow from "./tableExpand.vue";
	import {
		userList,
		getUserData,
		isShowApi,
		editOtherApi,
		giveLevelApi,
		userSetGroup,
		userGroupApi,
		levelListApi,
		userSetLabelApi,
		userLabelApi,
		userSynchro,
		getUserSaveForm,
		giveLevelTimeApi,
		extendInfo,
		batchProcess,
		importApi,
		exportUserList,
		exportUserList2
	} from "@/api/user";
	import {
		agentSpreadApi
	} from "@/api/agent";
	import editFrom from "../../../components/from/from";
	import sendFrom from "@/components/sendCoupons/index";
	import userDetails from "./handle/userDetails";
	import newsCategory from "@/components/newsCategory/index";
	import city from "@/utils/city";
	import customerInfo from "@/components/customerInfo";
	import XLSX from 'xlsx';
	import exportExcel from '@/utils/newToExcel.js'
	export default {
		name: "user_list",
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, 'yyyy-MM-dd hh:mm');
				}
			}
		},
		components: {
			expandRow,
			editFrom,
			sendFrom,
			userDetails,
			newsCategory,
			customerInfo,
			userLabel,
			labelList,
			promotersList
		},
		data() {
			return {
				dataLabel: [],
				labelListShow: false,
				labelShow: false,
				customerShow: false,
				promoterShow: false,
				labelActive: {
					uid: 0,
				},
				formInline: {
					uid: 0,
					spread_uid: 0,
					image: "",
				},
				options: {
					shortcuts: [{
							text: "今天",
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(
									new Date(
										new Date().getFullYear(),
										new Date().getMonth(),
										new Date().getDate()
									)
								);
								return [start, end];
							},
						},
						{
							text: "昨天",
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(
									start.setTime(
										new Date(
											new Date().getFullYear(),
											new Date().getMonth(),
											new Date().getDate() - 1
										)
									)
								);
								end.setTime(
									end.setTime(
										new Date(
											new Date().getFullYear(),
											new Date().getMonth(),
											new Date().getDate() - 1
										)
									)
								);
								return [start, end];
							},
						},
						{
							text: "最近7天",
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(
									start.setTime(
										new Date(
											new Date().getFullYear(),
											new Date().getMonth(),
											new Date().getDate() - 6
										)
									)
								);
								return [start, end];
							},
						},
						{
							text: "最近30天",
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(
									start.setTime(
										new Date(
											new Date().getFullYear(),
											new Date().getMonth(),
											new Date().getDate() - 29
										)
									)
								);
								return [start, end];
							},
						},
						{
							text: "上月",
							value() {
								const end = new Date();
								const start = new Date();
								const day = new Date(start.getFullYear(), start.getMonth(), 0).getDate();
								start.setTime(
									start.setTime(
										new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)
									)
								);
								end.setTime(
									end.setTime(
										new Date(new Date().getFullYear(), new Date().getMonth() - 1, day)
									)
								);
								return [start, end];
							},
						},
						{
							text: "本月",
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(
									start.setTime(
										new Date(new Date().getFullYear(), new Date().getMonth(), 1)
									)
								);
								return [start, end];
							},
						},
						{
							text: "本年",
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(
									start.setTime(new Date(new Date().getFullYear(), 0, 1))
								);
								return [start, end];
							},
						},
					],
				},
				collapse: false,
				headeType: "-1",
				headeNum: [{
						type: "-1",
						name: "全部"
					},
					{
						type: "wechat",
						name: "微信公众号"
					},
					{
						type: "routine",
						name: "微信小程序"
					},
					{
						type: "h5",
						name: "H5"
					},
					{
						type: "pc",
						name: "PC"
					},
					{
						type: "app",
						name: "APP"
					},
				],
				address: [],
				addresData: city,
				isShowSend: true,
				modal13: false,
				maxCols: 4,
				scrollerHeight: "600",
				contentTop: "130",
				contentWidth: "98%",
				// grid: {
				//   xl: 8,
				//   lg: 8,
				//   md: 12,
				//   sm: 24,
				//   xs: 24,
				// },
				grid2: {
					xl: 18,
					lg: 16,
					md: 12,
					sm: 24,
					xs: 24,
				},
				loading: false,
				total: 0,
				userFrom: {
					label_id: "",
					user_type: "",
					status: "",
					sex: "",
					is_promoter: "",
					country: "",
					isMember: "",
					pay_count: "",
					user_time_type: "",
					user_time: "",
					nickname: "",
					province: "",
					city: "",
					page: 1,
					limit: 15,
					level: "",
					group_id: "",
					field_key: "",
				},
				field_key: "",
				level: "",
				group_id: "",
				label_id: "",
				user_time_type: "",
				pay_count: "",
				userLists: [],
				FromData: null,
				selectionList: [],
				user_ids: "",
				selectedData: [],
				timeVal: [],
				array_ids: [],
				groupList: [],
				levelList: [],
				labelFrom: {
					page: 1,
					limit: "",
				},
				labelLists: [],
				display: "none",
				checkBox: false,
				selectionCopy: [],
				isCheckBox: false,
				isAll: 0,
				userId: 0,
				checkUidList: [],
				batchModal: false,
				menuActive: 1,
				batchLabel: [],
				batchData: {
					group_id: 0,
					label_id: [],
					level_id: 0,
					money_status: 0,
					money: 0,
					integration_status: 0,
					integration: 0,
					days_status: 1,
					day: 0,
					spread_uid: '',
				},
				spread_name: ''
			};
		},
		watch: {
			selectionList(value) {
				let arr = value.map((item) => item.uid);
				this.array_ids = arr;
				this.user_ids = arr.join();
			},
			userLists: {
				deep: true,
				handler(value) {
					value.forEach((item) => {
						this.selectionList.forEach((itm) => {
							if (itm.uid === item.uid) {
								item.checkBox = true;
							}
						});
					});
					const arr = this.userLists.filter((item) => item.checkBox);
					if (this.userLists.length) {
						this.checkBox = this.userLists.length === arr.length;
					} else {
						this.checkBox = false;
					}
				},
			},
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 100;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getList();
		},
		mounted() {
			this.userGroup();
			this.levelLists();
			this.groupLists();
		},
		methods: {
			async exportUser() {
				this.loading = true;
				let [th, filekey, data, fileName] = [
					[],
					[],
					[], ''
				]
				//   let fileName = "";
				let activeIds = [];
				this.dataLabel.forEach((item) => {
					activeIds.push(item.id);
				});
				
				this.userFrom.uids = this.checkUidList
				this.userFrom.all = this.isAll;
				this.userFrom.label_id = activeIds.join(",") || "";
				this.userFrom.user_type = this.userFrom.user_type || "";
				this.userFrom.status = this.userFrom.status || "";
				this.userFrom.sex = this.userFrom.sex || "";
				this.userFrom.is_promoter = this.userFrom.is_promoter || "";
				this.userFrom.country = this.userFrom.country || "";
				this.userFrom.user_time_type = this.userFrom.user_time_type || "";
				this.userFrom.pay_count = this.userFrom.pay_count || "";
				// this.userFrom.label_id = this.userFrom.label_id || "";
				this.userFrom.field_key = this.field_key === "all" ? "" : this.field_key;
				this.userFrom.level = this.userFrom.level === "all" ? "" : this.userFrom.level;
				this.userFrom.group_id = this.userFrom.group_id === "all" ? "" : this.userFrom.group_id;
				if(this.userFrom.uids.length>0 && this.userFrom.all == 0){
					this.userFrom.page = 1;
				}
				// console.log(this.userFrom);return;
				for (let i = 0; i < this.userFrom.page + 1; i++) {
					let lebData = await this.downUserData(this.userFrom)
					if (!fileName) fileName = lebData.filename
					if (!filekey.length) {
						filekey = lebData.filekey
					}
					if (!th.length) th = lebData.header
					if (lebData.export.length) {
						data = data.concat(lebData.export)
						this.userFrom.page++
					} else {
						let result = [];
						for (let j = 0; j < data.length; j++) {
							result.push({
								...data[j]
							});
						}
						exportExcel(th, filekey, fileName, result)
						return
					}
				}
			},
			downUserData(excelData) {
				return new Promise((resolve, reject) => {
					exportUserList(excelData).then((res) => {
						this.loading = false;
						return resolve(res.data)
					})
				})
			},
			promoters(row, tit) {
				this.$refs.promotersLists.modals = true;
				this.$refs.promotersLists.getList(row, tit);
			},
			async exportUser2() {
			
				let [th, filekey, data, fileName] = [
					[],
					[],
					[], ''
				]
				//   let fileName = "";
				let activeIds = [];
				this.dataLabel.forEach((item) => {
					activeIds.push(item.id);
				});
				
				this.userFrom.uids = this.checkUidList
				this.userFrom.all = this.isAll;
				this.userFrom.label_id = activeIds.join(",") || "";
				this.userFrom.user_type = this.userFrom.user_type || "";
				this.userFrom.status = this.userFrom.status || "";
				this.userFrom.sex = this.userFrom.sex || "";
				this.userFrom.is_promoter = this.userFrom.is_promoter || "";
				this.userFrom.country = this.userFrom.country || "";
				this.userFrom.user_time_type = this.userFrom.user_time_type || "";
				this.userFrom.pay_count = this.userFrom.pay_count || "";
				// this.userFrom.label_id = this.userFrom.label_id || "";
				this.userFrom.field_key = this.field_key === "all" ? "" : this.field_key;
				this.userFrom.level = this.userFrom.level === "all" ? "" : this.userFrom.level;
				this.userFrom.group_id = this.userFrom.group_id === "all" ? "" : this.userFrom.group_id;
				if(this.userFrom.uids.length>0 && this.userFrom.all == 0){
					this.userFrom.page = 1;
				}
				// console.log(this.userFrom);return;
				for (let i = 0; i < this.userFrom.page + 1; i++) {
					let lebData = await this.downUserData2(this.userFrom)
					if (!fileName) fileName = lebData.filename
					if (!filekey.length) {
						filekey = lebData.filekey
					}
					if (!th.length) th = lebData.header
					if (lebData.export.length) {
						data = data.concat(lebData.export)
						this.userFrom.page++
					} else {
						let result = [];
						for (let j = 0; j < data.length; j++) {
							result.push({
								...data[j]
							});
						}
						exportExcel(th, filekey, fileName, result)
						return
					}
				}
			},
			downUserData2(excelData) {
				return new Promise((resolve, reject) => {
					exportUserList2(excelData).then((res) => {
						return resolve(res.data)
					})
				})
			},
			triggerFileInput() {
				this.$refs.fileInput.click();
			},
			handleFileChange(event) {
				console.log(event)
				const file = event.target.files[0];
				if (file) {
					const reader = new FileReader();
					reader.onload = (e) => {
						const workbook = XLSX.read(e.target.result, {
							type: 'binary'
						});
						const firstSheetName = workbook.SheetNames[0];
						const worksheet = workbook.Sheets[firstSheetName];
						const data = XLSX.utils.sheet_to_json(worksheet);
						console.log(data);
						importApi({data:data}).then(res => {
							console.log(res)
						}).catch(res => {
							this.$Message.error(res.msg);
						})
						this.tableData = data;
					};
					reader.readAsBinaryString(file);
				 }
				},
				checkboxItem(e) {
						let uid = parseInt(e.rowid);
						let index = this.checkUidList.indexOf(uid);
						if (index !== -1) {
							this.checkUidList = this.checkUidList.filter((item) => item !== uid);
						} else {
							this.checkUidList.push(uid);
						}
					},
					checkboxAll() {
						// 获取选中当前值
						let obj2 = this.$refs.xTable.getCheckboxRecords(true);
						// 获取之前选中值
						let obj = this.$refs.xTable.getCheckboxReserveRecords(true);
						if (this.isAll == 0 && this.checkUidList.length <= obj.length && !this.isCheckBox) {
							obj = [];
						}
						obj = obj.concat(obj2);
						let uids = [];
						obj.forEach((item) => {
							uids.push(parseInt(item.uid))
						})
						this.checkUidList = uids;
						if (!obj2.length) {
							this.isCheckBox = false;
						}
					},
					allPages(e) {
						this.isAll = e;
						if (e == 0) {
							this.$refs.xTable.toggleAllCheckboxRow();
							// this.checkboxAll();
						} else {
							if (!this.isCheckBox) {
								this.$refs.xTable.setAllCheckboxRow(true);
								this.isCheckBox = true;
								this.isAll = 1;
							} else {
								this.$refs.xTable.setAllCheckboxRow(false);
								this.isCheckBox = false;
								this.isAll = 0;
							}
							this.checkUidList = []
						}
					},
					closeLabel(label) {
						let index = this.dataLabel.indexOf(
							this.dataLabel.filter((d) => d.id == label.id)[0]
						);
						this.dataLabel.splice(index, 1);
					},
					activeData(dataLabel) {
						this.labelListShow = false;
						if (this.batchModal && this.menuActive === 2) {
							this.batchLabel = dataLabel;
							this.batchData.label_id = dataLabel.map(item => item.id);
						} else {
							this.dataLabel = dataLabel;
						}
					},
					openLabelList(row) {
						this.labelListShow = true;
						let data = JSON.parse(JSON.stringify(this.dataLabel));
						if (this.batchModal && this.menuActive === 2) {
							data = JSON.parse(JSON.stringify(this.batchLabel));
						}
						this.$refs.labelList.userLabel(data);
					},
					// 标签弹窗关闭
					labelListClose() {
						this.labelListShow = false;
					},
					// 标签弹窗关闭
					labelClose(e) {
						if (!e) {
							this.getList();
						}
						this.labelShow = false;
						this.labelActive.uid = 0;
					},
					// 提交
					putSend(name) {
						this.$refs[name].validate((valid) => {
							if (valid) {
								if (!this.formInline.spread_uid) {
									return this.$Message.error("请上传用户");
								}
								agentSpreadApi(this.formInline)
									.then((res) => {
										this.promoterShow = false;
										this.$Message.success(res.msg);
										this.getList();
										this.$refs[name].resetFields();
									})
									.catch((res) => {
										this.$Message.error(res.msg);
									});
							}
						});
					},
					save() {
						this.$modalForm(getUserSaveForm()).then(() => this.getList());
						// getUserSaveForm().then(async (res) => {
						// 	if(res.data.status === false){
						// 		return this.$authLapse(res.data);
						// 	}
						// 	this.FromData = res.data;
						// 	this.$refs.edits.modals = true;
						// }).catch(err=>{
						// 	this.$Message.error(err.msg);
						// })
					},
					synchro() {
						userSynchro()
							.then((res) => {
								this.$Message.success(res.msg);
							})
							.catch((err) => {
								this.$Message.error(err.msg);
							});
					},
					// 分组列表
					groupLists() {
						this.loading = true;
						userLabelApi(this.labelFrom)
							.then(async (res) => {
								let data = res.data;
								this.labelLists = data.list;
							})
							.catch((res) => {
								this.loading = false;
								this.$Message.error(res.msg);
							});
					},
					onClickTab(type) {
						this.isAll = 0;
						this.isCheckBox = false;
						this.$refs.xTable.setAllCheckboxRow(false);
						this.checkUidList = [];
						this.userFrom.page = 1;
						this.userFrom.user_type = type == -1 ? '' : type;
						this.getList();
					},
					userGroup() {
						let data = {
							page: 1,
							limit: "",
						};
						userGroupApi(data).then((res) => {
							this.groupList = res.data.list;
						});
					},
					levelLists() {
						let data = {
							page: 1,
							limit: "",
							title: "",
							is_show: 1,
						};
						levelListApi(data).then((res) => {
							this.levelList = res.data.list;
						});
					},
					// 批量设置分组；
					setGroup() {
						if (this.selectionList.length === 0) {
							this.$Message.warning("请选择要设置分组的用户");
						} else {
							let uids = {
								all: this.isAll,
								uids: this.array_ids
							};
							if (this.isAll == 1) {
								uids.where = this.userFrom;
								uids.where = {
									city: this.userFrom.city,
									country: this.userFrom.country,
									field_key: this.userFrom.field_key,
									group_id: this.userFrom.group_id,
									isMember: this.userFrom.isMember,
									is_promoter: this.userFrom.is_promoter,
									label_id: this.userFrom.label_id,
									level: this.userFrom.level,
									nickname: this.userFrom.nickname,
									pay_count: this.userFrom.pay_count,
									province: this.userFrom.province,
									sex: this.userFrom.sex,
									status: this.userFrom.status,
									user_time: this.userFrom.user_time,
									user_time_type: this.userFrom.user_time_type,
									user_type: this.userFrom.user_type,
								};
							}
							this.$modalForm(userSetGroup(uids)).then(() => this.getList());
						}
					},
					// 批量设置标签；
					setLabel() {
						if (this.selectionList.length === 0) {
							this.$Message.warning("请选择要设置标签的用户");
						} else {
							let uids = {
								all: this.isAll,
								uids: this.array_ids
							};
							if (this.isAll == 1) {
								uids.where = {
									city: this.userFrom.city,
									country: this.userFrom.country,
									field_key: this.userFrom.field_key,
									group_id: this.userFrom.group_id,
									isMember: this.userFrom.isMember,
									is_promoter: this.userFrom.is_promoter,
									label_id: this.userFrom.label_id,
									level: this.userFrom.level,
									nickname: this.userFrom.nickname,
									pay_count: this.userFrom.pay_count,
									province: this.userFrom.province,
									sex: this.userFrom.sex,
									status: this.userFrom.status,
									user_time: this.userFrom.user_time,
									user_time_type: this.userFrom.user_time_type,
									user_type: this.userFrom.user_type,
								};
							}
							this.labelShow = true;
							this.labelActive.uid = uids;
							// this.$modalForm(userSetLabelApi(uids)).then(() => this.getList());
						}
					},
					// 是否为付费会员；
					changeMember() {
						this.userFrom.page = 1;
						this.getList();
					},
					// 选择国家
					changeCountry() {
						if (this.userFrom.country === "abroad" || !this.userFrom.country) {
							this.selectedData = [];
							this.userFrom.province = "";
							this.userFrom.city = "";
							this.address = [];
						}
					},
					// 选择地址
					handleChange(value, selectedData) {
						this.selectedData = selectedData.map((o) => o.label);
						this.userFrom.province = this.selectedData[0];
						this.userFrom.city = this.selectedData[1];
					},
					// 具体日期
					onchangeTime(e) {
						this.timeVal = e;
						this.userFrom.user_time = this.timeVal.join("-");
					},
					// 操作
					changeMenu(row, name, index) {
						this.userId = row.uid;
						let uid = [];
						uid.push(row.uid);
						let uids = {
							uids: uid
						};
						switch (name) {
							case "1":
								this.$refs.userDetails.modals = true;
								this.$refs.userDetails.activeName = "info";
								this.$refs.userDetails.getDetails(row.uid);
								break;
							case "2":
								this.getOtherFrom(row.uid);
								break;
							case "3":
								// this.giveLevel(row.uid);
								this.giveLevelTime(row.uid);
								break;
							case "4":
								this.del(
									row,
									"清除 【 " + row.nickname + " 】的会员等级",
									index,
									"user"
								);
								break;
							case "5":
								this.$modalForm(userSetGroup(uids)).then(() =>
									this.$refs.sends.getList()
								);
								break;
							case "6":
								this.openLabel(row);
								// this.$modalForm(userSetLabelApi(uids)).then(() => this.$refs.sends.getList());
								break;
							case "7":
								this.editS(row);
								break;
							default:
								this.del(
									row,
									"解除【 " + row.nickname + " 】的上级推广人",
									index,
									"tuiguang"
								);
								break;
								// this.del(row, '清除 【 ' + row.nickname + ' 】的会员等级', index)
						}
					},
					importData() {
						this.$refs.xTable.readFile({
							types: ['xlsx', 'csv', 'txt'],
							success: (evnt) => {
								console.log(evnt)
								const file = evnt.file;
								const reader = new FileReader();
								reader.onload = (e) => {
									const data = new Uint8Array(e.target.result);
									const workbook = XLSX.read(data, {
										type: 'array'
									});
									const firstSheetName = workbook.SheetNames[0];
									const worksheet = workbook.Sheets[firstSheetName];
									this.tableData = XLSX.utils.sheet_to_json(worksheet);
								};
								reader.readAsArrayBuffer(file);
							}
						})
					},
					openLabel(row) {
						this.labelShow = true;
						this.labelActive.uid = row.uid;
					},
					editS(row) {
						this.promoterShow = true;
						this.formInline.uid = row.uid;
					},
					customer() {
						this.customerShow = true;
					},
					imageObject(e) {
						this.customerShow = false;
						if (this.batchModal && this.menuActive === 6) {
							this.batchData.spread_uid = e.uid;
							this.spread_name = e.name;
						} else {
							this.formInline.spread_uid = e.uid;
							this.formInline.image = e.image;
						}
					},
					cancel(name) {
						this.promoterShow = false;
						this.$refs[name].resetFields();
					},
					// 赠送会员等级
					giveLevel(id) {
						giveLevelApi(id)
							.then(async (res) => {
								if (res.data.status === false) {
									return this.$authLapse(res.data);
								}
								this.FromData = res.data;
								this.$refs.edits.modals = true;
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
					},
					// 赠送会员等级
					giveLevelTime(id) {
						giveLevelTimeApi(id)
							.then(async (res) => {
								if (res.data.status === false) {
									return this.$authLapse(res.data);
								}
								this.FromData = res.data;
								this.$refs.edits.modals = true;
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
					},
					// 删除
					del(row, tit, num, name) {
						let delfromData = {
							title: tit,
							num: num,
							url: name === "user" ?
								`user/del_level/${row.uid}` : `agent/stair/delete_spread/${row.uid}`,
							method: name === "user" ? "DELETE" : "PUT",
							// url: `user/del_level/${row.uid}`,
							// method: 'DELETE',
							ids: "",
						};
						this.$modalSure(delfromData)
							.then((res) => {
								this.$Message.success(res.msg);
								this.getList();
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
					},
					// 清除会员删除成功
					submitModel() {
						this.getList();
					},
					// 会员列表
					getList() {
						this.loading = true;
						let activeIds = [];
						this.dataLabel.forEach((item) => {
							activeIds.push(item.id);
						});
						this.userFrom.label_id = activeIds.join(",") || "";
						this.userFrom.user_type = this.userFrom.user_type || "";
						this.userFrom.status = this.userFrom.status || "";
						this.userFrom.sex = this.userFrom.sex || "";
						this.userFrom.is_promoter = this.userFrom.is_promoter || "";
						this.userFrom.country = this.userFrom.country || "";
						this.userFrom.user_time_type = this.userFrom.user_time_type || "";
						this.userFrom.pay_count = this.userFrom.pay_count || "";
						// this.userFrom.label_id = this.userFrom.label_id || "";
						this.userFrom.field_key = this.field_key === "all" ? "" : this.field_key;
						this.userFrom.level =
							this.userFrom.level === "all" ? "" : this.userFrom.level;
						this.userFrom.group_id =
							this.userFrom.group_id === "all" ? "" : this.userFrom.group_id;
						userList(this.userFrom)
							.then(async (res) => {
								let data = res.data;
								data.list.forEach((item) => {
									item.checkBox = false;
								});
								this.userLists = data.list;
								this.total = data.count;
								this.loading = false;
								this.$nextTick(function() {
									if (this.isAll == 1) {
										this.selectionList = this.userLists;
										if (this.isCheckBox) {
											this.$refs.xTable.setAllCheckboxRow(true);
										} else {
											this.$refs.xTable.setAllCheckboxRow(false);
										}
									} else {
										let obj = this.$refs.xTable.getCheckboxReserveRecords(true);
										if (!this.checkUidList.length || this.checkUidList.length <= obj
											.length) {
											this.$refs.xTable.setAllCheckboxRow(false);
										}
									}
								})

							})
							.catch((res) => {
								this.loading = false;
								this.$Message.error(res.msg);
							});
					},
					pageChange({
						currentPage,
						pageSize
					}) {
						this.userFrom.page = currentPage;
						this.userFrom.limit = pageSize;
						this.getList();
					},
					// pageChange(index) {
					//   this.userFrom.page = index;
					//   this.getList();
					// },
					// 搜索
					userSearchs() {
						if (this.userFrom.user_time_type && !this.timeVal.length) {
							return this.$Message.error("请选择访问时间");
						}
						if (this.timeVal.length && !this.userFrom.user_time_type) {
							return this.$Message.error("请选择访问情况");
						}
						this.isAll = 0;
						this.$refs.xTable.setAllCheckboxRow(false);
						this.checkUidList = [];
						this.userFrom.page = 1;
						this.selectionList = [];
						this.getList();
					},
					// 重置
					reset(name) {
						this.$refs.xTable.setAllCheckboxRow(false);
						this.checkUidList = []
						this.headeType = "-1";
						this.userFrom = {
							user_type: "",
							status: "",
							sex: "",
							is_promoter: "",
							country: "",
							pay_count: "",
							user_time_type: "",
							user_time: "",
							nickname: "",
							field_key: "",
							level: "",
							group_id: "",
							label_id: "",
							page: 1, // 当前页
							limit: 20, // 每页显示条数
						};
						this.field_key = "";
						this.level = "";
						this.group_id = "";
						this.label_id = "";
						this.user_time_type = "";
						this.pay_count = "";
						this.timeVal = [];
						this.selectionList = [];
						this.dataLabel = [];
						this.getList();
					},
					// 获取编辑表单数据
					getUserFrom(id) {
						this.$modalForm(getUserData(id)).then(() => this.getList());
						// getUserData(id)
						//   .then(async (res) => {
						//     if (res.data.status === false) {
						//       return this.$authLapse(res.data);
						//     }
						//     this.FromData = res.data;
						//     this.$refs.edits.modals = true;
						//   })
						//   .catch((res) => {
						//     this.$Message.error(res.msg);
						//   });
					},
					// 获取积分余额表单
					getOtherFrom(id) {
						editOtherApi(id)
							.then(async (res) => {
								if (res.data.status === false) {
									return this.$authLapse(res.data);
								}
								res.data.rules[1].props.max = 999999;
								res.data.rules[1].props.precision = 0;
								this.FromData = res.data;
								this.$refs.edits.modals = true;
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
					},
					// 修改状态
					onchangeIsShow(row) {
						let data = {
							id: row.uid,
							status: row.status,
						};
						isShowApi(data)
							.then(async (res) => {
								this.$Message.success(res.msg);
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
					},
					// 点击发送优惠券
					onSend() {
						if (this.checkUidList.length === 0 && this.isAll == 0) {
							return this.$Message.warning("请选择要发送优惠券的用户");
						}
						this.$refs.sends.modals = true;
						this.$refs.sends.getList();
					},
					// 发送图文消息
					onSendPic() {
						if (this.checkUidList.length === 0 && this.isAll == 0) {
							this.$Message.warning("请选择要发送图文消息的用户");
						} else {
							this.modal13 = true;
						}
					},
					// 编辑
					edit(row) {
						this.getUserFrom(row.uid);
						// this.$modalForm(getUserSaveForm(row.uid)).then(() => this.getList());
					},
					//信息补充
					extendInfo(row) {
						// this.$modalForm(extendInfo(row.uid)).then(() => this.getList());
						extendInfo(row.uid).then(async (res) => {
							if (res.data.status === false) {
								return this.$authLapse(res.data);
							}
							this.FromData = res.data;
							this.$refs.edits.modals = true;
							this.getList()
						}).catch(err => {
							this.$Message.error(err.msg);
						})
					},
					// 修改成功
					submitFail(p) {
						this.getList();
						if (this.$refs.userDetails.modals) {
							this.$refs.userDetails.getDetails(this.userId);
						}
					},
					// 排序
					// sortChanged(e) {
					//   this.userFrom[e.key] = e.order;
					//   this.getList();
					// },
					// onSelectCancel(selection, row) {},
					menuSelect(name) {
						this.menuActive = name;
					},
					setBatch() {
						this.batchModal = true;
					},
					tagClose(id) {
						let index = this.batchLabel.findIndex(item => item.id === id);
						this.batchLabel.splice(index, 1);
					},
					cancelBatch() {
						this.batchModal = false;
					},
					// 保存批量操作
					saveBatch() {
						batchProcess({
							type: this.menuActive,
							uids: this.checkUidList,
							all: this.isAll,
							where: this.userFrom,
							data: this.batchData
						}).then(res => {
							this.$Message.success(res.msg);
							this.batchModal = false;
						}).catch(res => {
							this.$Message.error(res.msg);
						});
					},
					batchVisibleChange() {
						this.batchData = {
							group_id: 0,
							label_id: [],
							level_id: 0,
							money_status: 0,
							money: 0,
							integration_status: 0,
							integration: 0,
							days_status: 1,
							day: 0,
							spread_uid: '',
						};
						this.batchLabel = [];
						this.spread_name = '';
						this.menuActive = 1;
					}
			},
		};
</script>

<style scoped lang="stylus">
	/deep/.ivu-dropdown-item {
		font-size: 12px !important;
	}

	/deep/.vxe-table--render-default .vxe-cell {
		font-size: 12px;
	}

	.expand-row {
		margin-bottom: 16px;
		font-size: 12px;
	}

	.tdinfo {
		margin-left: 88px;
		margin-top: 15px;
	}

	.padding-add {
		padding: 20px 20px 0;
	}

	.input-add {
		max-width: 250px;
	}

	.labelInput {
		max-width: 250px;
		border: 1px solid #dcdee2;
		padding: 0 5px;
		border-radius: 5px;
		min-height: 30px;
		cursor: pointer;

		.span {
			color: #c5c8ce;
		}

		.iconxiayi {
			font-size: 12px;
		}
	}

	.picBox {
		display: inline-block;
		cursor: pointer;

		.upLoad {
			width: 58px;
			height: 58px;
			line-height: 58px;
			border: 1px dotted rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			background: rgba(0, 0, 0, 0.02);
		}

		.pictrue {
			width: 60px;
			height: 60px;
			border: 1px dotted rgba(0, 0, 0, 0.1);
			margin-right: 10px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.userFrom {
		>>>.ivu-form-item-content {
			margin-left: 0px !important;
		}
	}

	.userAlert {
		margin-top: 20px;
	}

	.userI {
		color: #1890FF;
		font-style: normal;
	}

	img {
		height: 36px;
		display: block;
	}

	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.tabBox_tit {
		width: 60%;
		font-size: 12px !important;
		margin: 0 2px 0 10px;
		letter-spacing: 1px;
		padding: 5px 0;
		box-sizing: border-box;
	}

	.modelBox {
		>>>.ivu-modal-body {
			padding: 0 16px 16px 16px !important;
		}
	}

	.vipName {
		color: #dab176;
	}

	.listbox {
		>>>.ivu-divider-horizontal {
			margin: 0 !important;
		}
	}

	/deep/.ivu-table-header {
		// overflow visible
	}

	/deep/.ivu-table th {
		overflow: visible;
	}

	/deep/.select-item:hover {
		background-color: #f3f3f3;
	}

	/deep/.select-on {
		display: block;
	}

	/deep/.select-item.on {
		/* background: #f3f3f3; */
	}

	.pane_pd {
		padding: 4px 16px 20px !important;
		font-weight: 500;
	}

	.new_tab {
		>>>.ivu-tabs-nav .ivu-tabs-tab {
			padding: 4px 16px 20px !important;
			font-weight: 500;
		}
	}

	.dateMedia {
		/deep/.ivu-form-item-content {
			max-width 250px;

			/deep/.ivu-date-picker {
				width 100%;
			}
		}
	}

	.select-tag {
		position: relative;
		min-height: 32px;
		padding: 0 24px 0 4px;
		border: 1px solid #dcdee2;
		border-radius: 4px;
		line-height: normal;
		user-select: none;
		cursor: pointer;

		&:hover {
			border-color: #57a3f3;
		}

		.ivu-icon {
			position: absolute;
			top: 50%;
			right: 8px;
			line-height: 1;
			transform: translateY(-50%);
			font-size: 14px;
			color: #808695;
			transition: all .2s ease-in-out;
		}

		.ivu-tag {
			position: relative;
			max-width: 99%;
			height: 24px;
			margin: 3px 4px 3px 0;
			line-height: 22px;
		}

		.placeholder {
			display: block;
			height: 30px;
			line-height: 30px;
			color: #c5c8ce;
			font-size: 12px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding-left: 4px;
			padding-right: 22px;
		}
	}

	>>>.batch-modal {
		.ivu-modal-body {
			padding: 0;
		}

		.ivu-alert {
			margin: 12px 24px;
		}

		.ivu-col-span-4 {
			flex: none;
			width: 130px;
		}

		.ivu-col-span-20 {
			padding-right: 37px;
		}

		.ivu-input-number {
			width: 100%;
		}

		.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
			z-index: auto;
		}

		.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
			right: auto;
			left: 0;
		}

		.ivu-menu-item {
			padding-right: 0;
		}
	}
</style>